/* reset */
body {
  background-color: #f5f7f9;
}

* {
  box-sizing: border-box;
}

#main{
  width: 100%; height: 100%;
}

$picPath: "../images/";
@mixin back{
   display: block;
   position: absolute;
   left: .25rem; top: .3rem;
   width: .19rem; height: .36rem;
   background: url($picPath+"back.png");
   background-size: .19rem .36rem;
   z-index: 9;
}
@mixin wrapComm{
  position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: #f6f6f6;
}

@mixin testBtn{
	 a{
			float: left;
			color: #fe9d2b; font-size: .3rem;
			width: 3.4rem; height: .8rem;
			text-align: center; line-height: .76rem;
			border: 1px solid #fe9d2b;
			background-color: rgba(0,0,0,0);
			border-radius: 4px;
			&:nth-of-type(2){
				float: right;
			}
			&.active{
				color: #fff;
 				background-color: #fe9d2b;
			}

		}
}

@mixin testTip{

  section{
		padding-left: .48rem;
		margin-bottom: .22rem;

		h2{
			position: relative;
			font-weight: normal;
			color: #999; font-size: .24rem;
			margin-bottom: .1rem;

			&:after{
				content: '';
				display: block;
				position: absolute;
				left: -.46rem; top: .06rem;
				width: .24rem; height: .24rem;
				background: url($picPath+"icon_time.png") no-repeat;
				background-size: .24rem .24rem;
			}
		}

		p{
			color: #333; font-size: .28rem;
		}

	}

}

/* 我的健康中心 */
.text-wrap-me{
	@include wrapComm;

	.test-index{
	  height: 4.2rem;
	  background: url($picPath+"test_head_banner.jpg") no-repeat #fe9d2b;
	  background-size: 100% 100%;
	  
	  .test-back{
	  	 @include back;
	  	 width: .8rem; height: .8rem;
	  	 background-repeat: no-repeat;
	  }

	  .test-result{
	  	transform: translate3d(0,1.25rem,0);
	  	width: 1.88rem; height: 1.88rem;
	  	background-color: rgba(255,255,255,.7);
	  	text-align: center;
	  	border-radius: 100%;
	  	margin: 0 auto;

	  	h1{
	  		 transform: translate3d(0,.35rem,0);
  			 font-size: .6rem; color: #39b54a;
	  	}

	  	p{
	  		transform: translate3d(0,.23rem,0);
	  		color: #999; font-size: .24rem;
	  	}
	  }

	}

	.content{
			padding: .25rem;
		  background-color: #fff;
 			border-bottom: 1px solid #e7e7e7;

		@include testBtn;

		.test-msg{
 			margin-top: 1.2rem;

 			@include testTip;

 			section:nth-of-type(2) h2{
			 &:after{
			 	 width: .26rem; height: .24rem;
				 background: url($picPath+"icon_jk.png") no-repeat;
				 background-size: .26rem .24rem;
			 }
			}
			section:nth-of-type(3) h2{
				 &::after{
				 	 top: .05rem;
				 	 width: .24rem; height: .23rem;
					 background: url($picPath+"icon_result.png") no-repeat;
					 background-size: .24rem .23rem;
				 }
			}
			section:nth-of-type(4) h2{
			 &:after{
			 	 top: .02rem;
			 	 width: .24rem; height: .3rem;
				 background: url($picPath+"icon_jy.png") no-repeat;
				 background-size: .24rem .3rem;
			 }
		}

		}

	}

}

/* 健康测试 */
.text-wrap-content{
	@include wrapComm;
	z-index: 11;
	header{
		 height: .9rem;
		 background-color: #fe9d2b;
		 text-align: center; line-height: .9rem;
		 color: #fff; font-size: .34rem;

		a{
			@include back;
			top: .25rem;
		}
	}

	/* 测试列表 */
	.all-list{
		display: none;
		background-color: #fff;

		section.list{
			position: relative;
			padding: .25rem;
			height: 1.41rem;
			border-bottom: 1px solid #e2e2e2;

			h1{
				font-size: .32rem; color: #333;
			}

			div{
				position: absolute;
				bottom: 0;
				span{
					position: relative;
					font-size: .2rem; color: #999;
					margin-right: 1rem;
					text-indent: .36rem;

					&:nth-of-type(2){
						&:after{
							content: '';
							display: block;
							position: absolute;
							left: -.36rem; top: .09rem;
							width: .21rem; height: .24rem;
							background: url($picPath+"icon_count.png") no-repeat;
							background-size: .21rem .24rem;
						}
					}
					&:nth-of-type(1){
						margin-left: .36rem;

						&:before{
							content: '';
							display: block;
							position: absolute;
							left:  -.36rem; top: .1rem;
							width: .24rem; height: .21rem;
							background: url($picPath+"icon_person_count.png") no-repeat;
							background-size: .24rem .21rem;
						}
					}
				}
			}

		}
	}

	/* 开始测试 */
	.test-answer-wrap{
		@include wrapComm;
		top: .9rem;
		display: block;

		.schedule{
			position: relative;
		  margin: .55rem .4rem 1.6rem;

			#barText{
				font-size: .18rem; color: #999;
				position: absolute;
				top: .22rem;
			}

			div{
				position: absolute;
				left: 1.2rem; right: 0; top: .4rem;
				height: .03rem;
				background-color: #d6d6d6;
				span{
					display: block;
					width: 10%; height: .03rem;
					background-color: #fe9d2b;
				}
			}
		}

		.content{
			margin: 0 .4rem;
			transition: .25s;

			div{
				font-size: .28rem; color: #333;
				margin-bottom: .28rem;
			}
			ul{
				border-radius: 5px;
				border: 1px solid #e0e0e0;
				min-height: 3.6rem;

				li{
					border-bottom: 1px solid #ebebeb;
					font-size: .28rem; color: #999;
					height: .89rem; line-height: .88rem;
					text-indent: .25rem;

					&:last-of-type{
						border-bottom: 0px solid #ebebeb;
					}
					&.active{
						color: #fe9d2b;
					}
				}
			}

			.topic-prev,.topic-next{
				visibility: hidden;
				float: left;
				margin: .35rem 0 0;
				font-size: .28rem; color: #999;
			}
			.topic-next{
				visibility: visible;
				float: right;
			}

		}

	}
	
	/* 结果 */
	.test-result-wrap{
		display: none;
		.content{
			margin: .4rem;
			background-color: #fff;
			border: 1px solid #f0f0f0;
			border-radius: 4px;
			padding: .35rem;

			div{
				margin-bottom: .55rem;

				span{
					text-align: center;
					display: block;

					&:nth-of-type(1){
						font-size: .6rem; color: #39b54a;
					}
					&:nth-of-type(2){
						font-size: .24rem; color: #999;
					}
				}
			}

			@include testTip;

			section:nth-of-type(1) h2{
				 &::after{
				 	 top: .05rem;
				 	 width: .24rem; height: .23rem;
					 background: url($picPath+"icon_result.png") no-repeat;
					 background-size: .24rem .23rem;
				 }
			}
			section:nth-of-type(2) h2{
			 &:after{
			 	 top: .02rem;
			 	 width: .24rem; height: .3rem;
				 background: url($picPath+"icon_jy.png") no-repeat;
				 background-size: .24rem .3rem;
			 }
		  }

		}

		@include testBtn;

		a{
			width: 3.2rem;

			&:nth-of-type(1){
			  margin-left: .4rem;
			}
			&:nth-of-type(2){
				  margin-right: .4rem;
			}
		
		}
		
		
	}

}

